<template>
    <div id="framework">
        <!-- 侧边栏 -->
        <div id="sidebar">
            <div id="logo">
                <!-- logo -->
                <el-avatar v-show="isCollapse" shape="square" :size="48"
                           src="https://cn.vuejs.org/images/logo.png"></el-avatar>
                <span v-show="!isCollapse"><img src="@/assets/logo.png" class="Icon">医院药品管理系统</span>
            </div>
            <el-menu class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse"
                     :collapse-transition="true"
                     background-color="#20222a"
                     text-color="#bdbdc0">
                <el-menu-item index="/home">
                    <i class="el-icon-house"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <NavMenu :navList="navList"/>


            </el-menu>
        </div>
        <div id="right">
            <!-- 顶部栏 -->
            <div id="topbar">
                <el-menu default-active="2-1" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                         menu-trigger="hover">
                    <el-menu-item @click="handleCollapse">
                        <span v-show="isCollapse" class="el-icon-s-unfold"></span>
                        <span v-show="!isCollapse" class="el-icon-s-fold"></span>
                    </el-menu-item>

                    <el-menu-item style="padding-left: 0px;">
                        <Bread></Bread>
                    </el-menu-item>

                    <div style="float: right;width:135px;height:60px;">
                        <el-submenu index="4">
                            <template slot="title">
                                <span>{{username}}({{roleName}})</span>
                            </template>
                            <el-menu-item @click="openMessage"><span class="el-icon-user-solid" ></span>基本信息</el-menu-item>
                            <el-menu-item @click="editPassword"><span class="el-icon-key"></span>修改密码</el-menu-item>
                            <el-divider></el-divider>
                            <el-menu-item @click="logout"><span class="el-icon-back"></span>退出</el-menu-item>
                        </el-submenu>
                    </div>
                </el-menu>
            </div>
            <div id="mainOut">
                <!-- 主要内容区 -->
                <router-view/>
            </div>
        </div>

        <!-- 修改密码弹窗 -->
        <el-dialog title="修改密码" :visible.sync="editPassworddDialog" width="400px" :close-on-click-modal="false">
            <div class="edit-box">
                <div class="edit-name">
                    用户名
                    <p>{{ username }}</p>
                </div>
                <el-form ref="editForm" :model="editForm" :rules="editRules" class="demo-ruleForm">
                    <el-form-item label="原始密码" prop="oldPassword">
                        <el-input v-model="editForm.oldPassword" type="password" placeholder="请输入原始密码"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="newPassword">
                        <el-input v-model="editForm.newPassword" type="password" placeholder="8-16位，包含字母，数字，字符"
                                  maxlength="16"/>
                    </el-form-item>
                    <el-form-item label="请重复密码" prop="confirmPassword">
                        <el-input v-model="editForm.confirmPassword" type="password" placeholder="请重复输入密码"
                                  maxlength="16"/>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <el-button @click="editPassworddDialog = false">取 消</el-button>
          <el-button type="primary" @click="editPasswordForm('editForm')">保存</el-button>
        </span>
            </div>
        </el-dialog>


        <!-- 基本信息 -->
        <el-dialog title="基本信息" :visible.sync="messageDialog" width="30%" :close-on-click-modal="false">
            <div class="edit-box">
                <div class="message-font" >
                    用户名:
                    <span class="message-item">{{ username }}</span>
                </div>
                <div class="message-font" >
                    角&nbsp;&nbsp;色:
                    <span class="message-item">{{ user.roleName }}</span>
                </div>
                <div class="message-font" >
                    电&nbsp;&nbsp;话:
                    <span class="message-item">{{ user.phone }}</span>
                </div>

            </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="messageDialog = false">关 闭</el-button>
            </span>
        </el-dialog>


    </div>
</template>


<script>
    import NavMenu from "../components/NavMenu";
    import Bread from "../components/Bread";

    export default {
        name: 'framework',
        components: {
            NavMenu,
            Bread
        },
        data() {
            // 密码校验
            const validatePass = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入密码"));
                } else {
                    callback();
                }
            };
            const validatePass2 = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.editForm.newPassword) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return {
                messageDialog: false,
                //默认左侧导航展开
                isCollapse: false,
                user:{},
                username: "",
                roleName: "",
                userId: undefined,
                editForm: {},
                editRules: {
                    oldPassword: [
                        {
                            required: true,
                            message: "请输入原密码",
                            trigger: "blur"
                        }
                    ],
                    newPassword: [
                        {
                            required: true,
                            validator: validatePass,
                            trigger: "blur"
                        }
                    ],
                    confirmPassword: [
                        {
                            required: true,
                            message: "",
                            validator: validatePass2,
                            trigger: "blur"
                        }
                    ]
                },
                editPassworddDialog: false,
                navList: []
            }
        }
        ,
        mounted() {
        },
        computed: {
            avatar() {
                try {
                    if (this.$store.state.user) {
                        return this.$store.state.user.avatar;
                    }
                } catch (e) {
                }
                return "http://localhost:8081/images/logo.png";
            }
        }
        ,
        methods: {
            openMessage(){
                this.messageDialog = true;
            },
            //打开修改密码框
            editPassword() {
                this.editPassworddDialog = true;
            }
            ,
            //修改密码
            editPasswordForm(formName) {
                var that = this;
                that.$refs[formName].validate(valid => {
                    if (valid) {
                        var oldPassword = that.editForm.oldPassword;
                        var newPassword = that.editForm.newPassword;
                        var userId = that.userId;

                        that.$post("/user/editPassword", {
                            oldPassword: oldPassword,
                            newPassword: newPassword,
                            userId: userId
                        }).then(res => {
                            if (res.code == 200) {
                                that.$message.success("密码修改成功");
                                that.editPassworddDialog = false;
                                that.$notify.info("5秒后退出登录");
                                setTimeout(function () {
                                    that.logout();
                                }, 5000);

                            } else {
                                that.$message.error(res.msg);
                            }
                        })

                    } else {
                        return false;
                    }
                });
            },
            handleCollapse() {
                // 切换显示与展示
                this.isCollapse = !this.isCollapse
            },
            handleSelect(key, keyPath) {
                var path = keyPath[keyPath.length - 1]
                // 退出登录
                if (path === '/logout') {
                    this.$store.commit('setUser', null)
                    this.$router.push('/login')
                } else {
                    // 跳转到指定页面
                    //console.log(this.$route);
                    this.$router.push(path)
                }
            },
            //退出登录
            logout() {
                //清空token
                window.localStorage.removeItem("token");
                //清空用户信息
                window.localStorage.removeItem("empId");
                window.localStorage.removeItem("empInfo");
                //退出到登录页面
                this.$router.push("/login");
            },

        },
        created() {
            //this.navList = this.$store.state.permissionList;
            this.user = JSON.parse(window.localStorage.getItem("user"));
            this.username = this.user.username;
            this.roleName = this.user.roleName;
            this.userId = this.user.id;
        }
    }
</script>

<style lang="less" scoped>

    .message-font{
        font-size: 16px;
        margin-top: 10px;
    }

    .message-item{
        margin-left: 20px;
        
    }

    /deep/ .el-icon-arrow-down {
        right: -5px;
    }

    /deep/ .el-submenu__title {
        padding-right: 0;
        //padding-left-: 38px;
    }

    .el-avatar {
        background-color: rgba(0, 0, 0, 0);
    }

    .Icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: -10px;
    }

    .el-menu {
        border-right-width: 0;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 185px;
        min-height: 400px;
        overflow: hidden;
    }

    /deep/ .el-submenu__icon-arrow {
        margin-right: 20px;
    }

    #framework {
        width: 100%;
        height: 100vh;
        display: flex;

        #sidebar {
            background: #20222a;
            height: auto;
            overflow: auto;
            transition: width 0.25s;
            -webkit-transition: width 0.25s;
            -moz-transition: width 0.25s;
            -webkit-transition: width 0.25s;
            -o-transition: width 0.25s;

            #logo {
                color: #bdbdc0;
                height: 60px;

                span {
                    background-color: rgba(0, 0, 0, 0);
                    display: block;
                    text-align: center;
                    position: relative;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }

        #right {
            flex: 1;
            /*height: auto;*/
            overflow: hidden;

            /deep/ #topbar {
                position: sticky;
                top: 0px;
                width: 100%;
            }

            #mainOut {
                height: calc(~"100% - 80px");;
                padding: 10px;
                padding-bottom: 0px;
                overflow-y: auto;
                background: white;1
                /*.panel {*/
                /*background: white;*/
                /*border-radius: 5px;*/
                /*height: 100%;*/
                /*}*/

                #main {

                    // height: 1500px;
                    .backTop {
                        font-size: 32px;
                        color: #409eff;
                    }
                }

                /*#footer {*/
                    /*margin-top: 10px;*/
                /*}*/

            }
        }
    }
</style>
